Ext.define('Ext.overrides.ux.TreePicker', {
    override: 'Ext.ux.TreePicker',

    config: {

        /**
         * 是否显示树的根节点
         */
        rootVisible: true,
        useArrows: false
    },

    /**
     * Creates and returns the tree panel to be used as this field's picker.
     */
    createPicker: function () {
        var me = this,
            picker = new Ext.tree.Panel({
                shrinkWrapDock: 2,
                store: me.store,
                floating: true,
                displayField: me.displayField,
                columns: me.columns,
                minHeight: me.minPickerHeight,
                maxHeight: me.maxPickerHeight,
                manageHeight: false,
                rootVisible: me.rootVisible,
                useArrows: me.useArrows,
                shadow: false,
                listeners: {
                    scope: me,
                    itemclick: me.onItemClick
                },
                viewConfig: {
                    listeners: {
                        scope: me,
                        render: me.onViewRender
                    }
                }
            }),
            view = picker.getView();

        if (Ext.isIE9 && Ext.isStrict) {
            // In IE9 strict mode, the tree view grows by the height of the horizontal scroll bar when the items are highlighted or unhighlighted.
            // Also when items are collapsed or expanded the height of the view is off. Forcing a repaint fixes the problem.
            view.on({
                scope: me,
                highlightitem: me.repaintPickerView,
                unhighlightitem: me.repaintPickerView,
                afteritemexpand: me.repaintPickerView,
                afteritemcollapse: me.repaintPickerView
            });
        }
        return picker;
    },

    selectItem: function (record) {
        var me = this;
        me.setFieldCls(record.data.iconCls);
        me.setValue(record.getId());
        me.fireEvent('select', me, record);
        me.collapse();
    },

    setFieldCls: function (cls) {
        var me = this;
        var inputEl = me.inputEl;
        if (inputEl) {
            inputEl.removeCls(me.fieldCls);
            me.fieldCls = '';
        }
        if (inputEl && cls) {
            inputEl.addCls(cls);
            me.fieldCls = cls;
            me.setFieldStyle('background-repeat: no-repeat;background-position: left center;padding-left: 20px');
        }
    }
});